<template>
  <div>
    <ul class="catitems-center">
      <li v-for="item in catitems" :key="item.name" class="catitems-item">
        <img :src="item.image_src" alt="" class="catitems-img">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeCatitems',
  props: {
    catitems: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.catitems-center{
  display: flex;
  text-align: center;
  margin-top: .125rem;
  // box-shadow: 0px 5px 8px rgb(180, 180, 180);
  .catitems-item{
    flex: 1;
    .catitems-img{
      width: 80%;
    }
  }
}
</style>
